package com.newtype.meeting.client.widget.backend;

import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.binding.FormBinding;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.core.XDOM;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.BeanModelLookup;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.ComponentPlugin;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FileUploadField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.extjs.gxt.ui.client.widget.form.Radio;
import com.extjs.gxt.ui.client.widget.form.RadioGroup;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.newtype.meeting.client.AppEvents;
import com.newtype.meeting.client.GMeeting;
import com.newtype.meeting.client.MeetingConstants;
import com.newtype.meeting.client.widget.SubjectHtml;
import com.newtype.meeting.shared.AccountDTO;

/**
 * 修改我的资料面板
 * @author 汪恭泽
 *
 */
public class VcardEditPanel extends ContentPanel {
	private MeetingConstants constants = Registry.get(GMeeting.CONSTANTS);

	private FormPanel formPanel;
	private FormData formData;

	private RadioGroup gender;//性别
	private RadioGroup openTAG;//公开个人资料

	private BeanModel accountModel;

	public VcardEditPanel(AccountDTO account) {
		//		setHeading("修改我的资料");
		setHeaderVisible(false);
		setLayout(new FormLayout());
		setScrollMode(Scroll.AUTO);

		createFormPanel(account);
	}

	private void createFormPanel(final AccountDTO account) {
		FormData formData2 = new FormData("100%");
		formData = new FormData("95%");
		formPanel = new FormPanel();
		formPanel.setHeaderVisible(false);
		formPanel.setFrame(true);
		formPanel.setLayout(new FormLayout());
		formPanel.setButtonAlign(HorizontalAlignment.CENTER);
		formPanel.setStyleAttribute("margin", "10px 150px 10px 150px");

		//页面主题
		String imgsrc = "images/docedit.png";
		SubjectHtml subjectHtml = new SubjectHtml("修改我的资料", imgsrc, "", "", "");
		formPanel.add(subjectHtml, formData);

		//注释说明插件
		ComponentPlugin plugin = new ComponentPlugin() {
			public void init(Component component) {
				component.addListener(Events.Render,
						new Listener<ComponentEvent>() {
							public void handleEvent(ComponentEvent be) {
								El elem = be.getComponent().el().findParent(
										".x-form-element", 3);
								// should style in external CSS  rather than directly  
								elem
										.appendChild(XDOM
												.create("<span style='color: #C20000;padding: 1 0 2 0px;'>"
														+ be
																.getComponent()
																.getData("text")
														+ "</span>"));
							}
						});
			}
		};

		//表单分栏主容器
		LayoutContainer main = new LayoutContainer();
		main.setLayout(new ColumnLayout());

		//表单分栏左容器
		LayoutContainer left = new LayoutContainer();
		left.setStyleAttribute("paddingRight", "10px");
		FormLayout layout = new FormLayout();
		left.setLayout(layout);

		//帐号
		LabelField accountID = new LabelField();
		accountID.setFieldLabel("<span class='span-field'>"
				+ constants.account() + ":</span>");
		accountID.setName("accountID");
		left.add(accountID);

		//性别
		Radio male = new Radio();
		male.setBoxLabel("男");
		male.setValueAttribute("1");

		Radio female = new Radio();
		female.setBoxLabel("女");
		female.setValueAttribute("0");

		gender = new RadioGroup();
		gender.setFieldLabel("<span class='span-field'>" + constants.gender()
				+ "</span>");
		gender.add(male);
		gender.add(female);
		if (account.getGender() != null && account.getGender().equals("1")) {
			gender.setValue(male);
		} else {
			gender.setValue(female);
		}
		left.add(gender);

		//公司电话
		TextField<String> officeTel = new TextField<String>();
		officeTel.setFieldLabel("<span class='span-field'>"
				+ constants.officePhoneNO() + "</span>");
		officeTel.setName("officePhoneNO");
		left.add(officeTel, formData2);

		//Email
		TextField<String> email = new TextField<String>();
		email.setFieldLabel("<span class='span-field'>Email</span>");
		email.setName("email");
		left.add(email, formData2);

		//Skype
		TextField<String> skype = new TextField<String>();
		skype.setFieldLabel("<span class='span-field'>Skype</span>");
		skype.setName("skype");
		left.add(skype, formData2);

		//呼叫器
		TextField<String> pager = new TextField<String>();
		pager.setFieldLabel("<span class='span-field'>呼叫器</span>");
		pager.setName("pager");
		left.add(pager, formData2);

		//紧急联络人
		TextField<String> emergencyContact = new TextField<String>();
		emergencyContact.setFieldLabel("<span class='span-field'>紧急联络人</span>");
		emergencyContact.setName("emergencyContact");
		left.add(emergencyContact, formData2);

		//表单分栏右容器
		LayoutContainer right = new LayoutContainer();
		right.setStyleAttribute("paddingLeft", "10px");
		layout = new FormLayout();
		right.setLayout(layout);

		//姓名
		TextField<String> fullName = new TextField<String>();
		fullName.setFieldLabel("<span class='span-field'>姓名</span>");
		fullName.setName("fullName");
		right.add(fullName);

		//生日
		DateField birthday = new DateField();
		birthday.setFieldLabel("<span class='span-field'>生日</span>");
		birthday.setName("birthday");
		right.add(birthday);

		//分机
		TextField<String> extension = new TextField<String>();
		extension.setFieldLabel("<span class='span-field'>分机</span>");
		extension.setName("officephoneEXT");
		right.add(extension);

		//MSN
		TextField<String> msn = new TextField<String>();
		msn.setFieldLabel("<span class='span-field'>MSN</span>");
		msn.setName("msn");
		right.add(msn, formData2);

		//行动电话
		TextField<String> phone = new TextField<String>();
		phone.setFieldLabel("<span class='span-field'>行动电话</span>");
		phone.setName("phone");
		right.add(phone, formData2);

		//家用电话
		TextField<String> homeTel = new TextField<String>();
		homeTel.setFieldLabel("<span class='span-field'>家用电话</span>");
		homeTel.setName("homePhoneNO");
		right.add(homeTel, formData2);

		//紧急联络电话
		TextField<String> emergencyPhoneNO = new TextField<String>();
		emergencyPhoneNO
				.setFieldLabel("<span class='span-field'>紧急联络电话</span>");
		emergencyPhoneNO.setName("emergencyPhoneNO");
		right.add(emergencyPhoneNO, formData2);

		//添加左、右面板
		main.add(left, new ColumnData(.5));
		main.add(right, new ColumnData(.5));

		formPanel.add(main, formData);

		//通讯地址
		TextField<String> address = new TextField<String>();
		address.setFieldLabel("<span class='span-field'>通讯地址</span>");
		address.setName("address");
		formPanel.add(address, formData);

		//个人简介
		TextArea introduces = new TextArea();
		introduces.setFieldLabel("<span class='span-field'>个人简介</span>");
		introduces.setName("introduces");
		introduces.setHeight(160);
		formPanel.add(introduces, formData);

		//个人照片
		FileUploadField personalIMG = new FileUploadField();
		personalIMG.setFieldLabel("<span class='span-field'>个人照片</span>");
		formPanel.add(personalIMG);

		//公开个人资料
		Radio yes = new Radio();
		yes.setBoxLabel("是");
		yes.setValueAttribute("1");

		Radio no = new Radio();
		no.setBoxLabel("否");
		no.setValueAttribute("0");

		openTAG = new RadioGroup();
		openTAG.setFieldLabel("<span class='span-field'>公开个人资料</span>");
		openTAG.addPlugin(plugin);
		openTAG.setData("text", "【否】你的出生日期，呼叫器，MSN账号，Skype账号，家用电话以及住址将不被公开");
		openTAG.add(yes);
		openTAG.add(no);
		if (account.getOpenTAG() != null && account.getOpenTAG().equals("1")) {
			openTAG.setValue(yes);
		} else {
			openTAG.setValue(no);
		}
		formPanel.add(openTAG);

		//备注
		TextArea remark = new TextArea();
		remark.setFieldLabel("<span class='span-field'>备注</span>");
		remark.setName("notes");
		remark.setHeight(160);
		formPanel.add(remark, formData);

		//数据绑定
		accountModel = BeanModelLookup.get().getFactory(AccountDTO.class)
				.createModel(account);
		FormBinding binding = new FormBinding(formPanel, true);
		binding.bind(accountModel);

		//送出按钮
		formPanel.addButton(getSaveButton());

		//添加表单到主面板
		add(formPanel);
	}

	/**
	 * 送出按钮
	 * @return
	 */
	private Button getSaveButton() {
		Button button = new Button("送出");
		button.addSelectionListener(new SelectionListener<ButtonEvent>() {
			@Override
			public void componentSelected(ButtonEvent ce) {
				AccountDTO account = accountModel.getBean();
				account.setGender(gender.getValue().getValueAttribute());
				account.setOpenTAG(openTAG.getValue().getValueAttribute());
				Dispatcher.forwardEvent(AppEvents.SaveVcardEdit, account);
			}
		});
		return button;
	}
}
